const path=require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack');
//启用热更新的第二步
//const webpack=require('webpack')
//这个配置文件其实就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象

//导入在内存中生产Html页面的插件
//只要是插件，都一定要放到plugins节点中去
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
	mode: "development",
	entry: path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包打哪文件
	output:{//输出文件相关的配置
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
		filename:'bundle.js'//这是指定输出的文件的名称
	},
//	devServer:{//配置dev-server命令参数的第二种方式（比较麻烦）
//		open: true,//自动打开浏览器
//		port: 3000,//设置启动时候运行端口
//		contentBase: "src",//指定托管的根目录
//		hot:true//启用热更新的第一步
//	},
	plugins:[//配置插件的节点
//	    new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象，这是第三步
	    
	    new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
	    	template: path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径
	    	//去生成内存中的页面
	    	filename:'index.html'//指定生成页面的名称 
	    	
	    }),
		 new VueLoaderPlugin(),//vue-loader@15.*之后除了必须带有VueLoaderPlugin
	],
	module:{//这个节点，用于配置所有第三方模块加载器
		rules:[//所有第三方模块的匹配规则
		{ test:/\.css$/,use:['style-loader','css-loader'] },//处理css文件
		{ test:/\.less$/,use:['style-loader','css-loader','less-loader' ]},//处理.less文件
		{ test:/\.scss$/,use:['style-loader','css-loader','sass-loader' ]},//处理.sass文件
		{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},//处理图片文件
		//limit给定的值是图片的大小，单位是byte，如果我们引用的图片大于或等于给定的limit值，则不会被转为base64格式的字符串
		{ test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件
		{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//这是通过babel来转换es6语法
		{ test:/\.vue$/,use:'vue-loader' },//这是处理.vue文件
		{ test: /vue-preview.src.*?js$/,loader: 'babel'}
		]
		
	},
    resolve:{
    	alias:{//修改Vue被导入时候的包的路径
    		"vue$":"vue/dist/vue.js"
    	}
	},
}

//使用webpack-dev-server这个工具来实现自动打包编译的功能
//1.运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//2.安装完毕后，这个工具的用法和webpack命令的用法完全一样
//3.由于我们是在项目中本地安装的webpack-dev-server，所以无法把它当做脚本命令在终端中直接运行
//（只有安装全局-g的工具,才能在终端中正常执行）
//4.注意：webpack-dev-server这个工具得在本地项目安装webpack
//5.webpack-dev-server帮我们打包生成的bundle.js，本没有存放到实际的物理磁盘中去，而是直接
//托管到电脑的内存中
//6.webpack-dev-server打包好的文件，以一种虚拟的形式，托管到了项目的跟目录下，都是我们看不见他
//我们可以认为这个文件与dist src node_modules是平级的
